import React, { FC, useState, useEffect } from "react";
import { useParams } from 'react-router-dom'
import styles from './index.module.scss'
import { AppstoreOutlined, DatabaseOutlined, EyeOutlined, AlignCenterOutlined } from '@ant-design/icons';
import type { TabsProps, } from 'antd';
import { Tabs, Tooltip, Button,Spin } from 'antd';
import { getQuestionService } from "../../../services/question";

const arr = [];
for (let i = 0; i < 100; i++) {
    arr.push(i);
}
const items: TabsProps['items'] = [
    {
        key: '1',
        label: <><AppstoreOutlined />组件库</>,
        children: <>
            <div>
                {arr.map((i) => {
                    return (
                        <div key={i}>
                            <p>文本显示</p>
                            <div className={styles.demo}>
                                <Button icon={<AlignCenterOutlined />}>标题描述</Button>
                                <Button icon={<AlignCenterOutlined />}>标题</Button>
                                <Button icon={<AlignCenterOutlined />}>段落</Button>
                            </div>
                        </div>)
                })}

            </div>
        </>
    },
    {
        key: '2',
        label: <><DatabaseOutlined />图层</>,
        children: 'Content of Tab Pane 2',
    },
];


const Edit: FC = () => {
    const { id } = useParams()
    const [flag, setFlag] = useState(true)
    const [loading, setLoading] = useState(true)
    const [questionData, setQuestionData] = useState({})
    useEffect(() => {
        async function fn() {
            const data = await getQuestionService(id as string)
            setQuestionData(data)
            setLoading(false)
        }
        fn()
    }, [])



    return  <div className={styles.container}>
            <Spin spinning={loading} >
            <div className={styles.header}>
                <Tooltip title="预览模式" placement="rightTop"  >
                    <EyeOutlined onClick={() => setFlag(!flag)} />
                </Tooltip >
            </div>
            <div className={styles['content-wrapper']}>
                <div className={styles.content}>
                    {flag ? <div className={styles.left}>
                        <Tabs defaultActiveKey="1" items={items} />
                    </div> : ''}
                    <div className={styles.main}>
                        <div className={styles['canvas-wrapper']}>
                            <h1>画布 id是:{id}</h1>
                            <div>
                                {JSON.stringify(questionData)}
                            </div>
                        </div>
                    </div>
                    {flag ? <div className={styles.right}></div> : ''}
                </div>
            </div>
            </Spin>
        </div>
   
}

export default Edit